import { useRef, useState } from 'react'

// 只要组件中任何一个响应式状态发生了变化，
// 都会导致函数式组件的 rerender (重新渲染)
// 组件的 rerender 本质上就是重新把组件的函数执行了一遍而已！！！

// 函数式组件中的 ref，只会在组件首次渲染时被初始化，
// 当组件 rerender 的时候，不会导致 ref 的重新初始化。
// 因此，我们可以使用 ref 在函数式组件渲染周期之间保存变量的值！
function Demo2() {
  const [count, setCount] = useState(0)
  // 旧值
  // let [prev, setPrev] = useState()
  // const c = useRef(null)
  let prev = 0

  const add = () => {
    setCount((prev) => prev + 1)
    console.log('旧值是' + count)
    prev = count
    console.log('prev=' + prev)
    // setPrev(count)
    // c.current = count
  }

  return (
    <div>
      <button onClick={add}>+1</button>
      <h1>count 值是：{count}</h1>
      <h1>上一次的旧值是：{prev}</h1>
    </div>
  )
}

export default Demo2
